<template>
    <div class="home-content">
        <div>
            <div class="head">
                <el-image :src="homeBanner" fit="contain"></el-image>
            </div>
            <div class="content" v-if="user">
                <div class="list">
                    <div @click="showRegister(1)">
                        <div class="li">
                            <el-image src="/static/images/in.png"></el-image>
                        </div>
                        <p>进门登记</p>
                    </div>
                    <div @click="showRegister(2)">
                        <div class="li">
                            <el-image src="../../static/images/out.png"></el-image>
                        </div>
                        <p>出门登记</p>
                    </div>
                </div>
                <div class="myCode" @click="showCode()">
                    <div class="iconBox">
                        <el-image :src="iconCode" class="icon"></el-image>
                    </div>
                    <div class="cont">
                        <div>个人信息上报</div>
                        <div class="explain">普查所有院内人员健康状况</div>
                    </div>
                    <div class="rt">
                        <el-image :src="iconCodeMin"></el-image>
                    </div>
                </div>
                <div class="myCode" @click="punchCard()">
                    <div class="iconBox">
                        <el-image src="../../static/images/punchCard.png" class="icon"></el-image>
                    </div>
                    <div class="cont">
                        <div>每日健康打卡</div>
                        <div class="explain">上报健康数据，追踪健康状态</div>
                    </div>
                    <div class="rt">
                        <el-image src="../../static/images/punchCard1.png"></el-image>
                    </div>
                </div>
            </div>
        </div>
        <com-buttom></com-buttom>
    </div>
</template>

<script>
    import homeBanner from '../../static/images/home.png'
    import iconCode from '../../static/images/home1.png'
    import iconCodeMin from '../../static/images/home2.png'
    import icon1 from '../../static/images/home3.png'
    import icon2 from '../../static/images/home4.png'
    import icon3 from '../../static/images/home5.png'
    import logout from '../../static/images/logout.png'
    import comButtom from './buttom'
    import {mapGetters} from 'vuex'

    export default {
        data() {
            return {
                show: true,
                homeBanner: homeBanner,
                iconCode: iconCode,
                iconCodeMin: iconCodeMin,
                icon1: icon1,
                icon2: icon2,
                icon3: icon3,
                iconLogout: logout,
                countHospital: null
            }
        },
        computed: {
            ...mapGetters([
                'user',
                'codeInfo'
            ])
        },
        mounted() {
            if (this.$route.query.qrresult) {
                this.$router.push({
                    path: '/scanCheck',
                    query: {
                        qrresult: this.$route.query.qrresult
                    }
                })
            }
            this.init()
            // this.$method.wxConfig()
        },
        methods: {
            init() {
                let _this = this
                if (!this.codeInfo.hcode) {
                    this.$vux.loading.show()
                    if (!this.user.type) {
                        this.$http.get('/index/userInfo').then(res => {
                            if (res.data) {
                                _this.$store.commit('SET_USER', res.data)
                            }
                            profile()
                        })
                    } else {
                        profile()
                    }
                }

                this.$http.get('/index/appointmentData').then(result => {
                    if (result.success) this.countHospital = result.data
                })

                function profile() {
                    _this.$http.get('/healthcode/profile').then(result => {
                        if (result.success && result.data) {
                            _this.$store.commit('SET_CODEINFO', result.data)
                            _this.$vux.loading.hide()
                        }
                    })
                }
            },
            showCode() {
                if (this.codeInfo && this.codeInfo.qrcodePath) {
                    this.$router.push('/code')
                } else {
                    this.$router.push('/apply?role=3')
                }
            },
            showRegister(type) {
                if (this.codeInfo && this.codeInfo.qrcodePath) {
                    this.$router.push('/registration?role=' + type)
                } else {
                    this.$vux.toast.text('请先填写个人信息', 'middle')
                }
            },
            punchCard() {
                if (this.codeInfo && this.codeInfo.qrcodePath) {
                    this.$router.push('/punchCard')
                } else {
                    this.$vux.toast.text('请先填写个人信息', 'middle')
                }
            },
            // 商业复业
            businessCard() {
                this.$http.get('/resumption/getComApply').then(result => {
                    let approvalResult = -1
                    if (result.data) approvalResult = result.data.approvalResult
                    this.$router.push('/businessOperation?approvalResult=' + approvalResult)
                })
            },
            scan() {
                let that = this
                this.$wechat.scanQRCode({
                    needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                    scanType: ['qrCode'], // 可以指定扫二维码还是一维码，默认二者都有
                    success: function (res) {
                        that.$router.push('/sweepCodeCheck?qrresult=' + res.resultStr)
                    }
                })
            },
            logout() {
                this.$http.post('/login/logout').then(result => {
                    if (result.success) {
                        this.$store.commit('SET_LOGOUT')
                        this.$router.push('/login')
                    }
                })
            }
        },
        components: {
            comButtom
        }
    }
</script>

<style scoped lang="less">
    .home-content {
        height: 100%;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-image: linear-gradient(#93ABFF, #fff);

        .head {
            /*font-style: italic;*/
            text-align: center;
            height: 2.5rem;
            background-size: cover;
            background-position: top center;
            background-repeat: no-repeat;
            padding: .45rem;
            margin-top: .3rem;

            .el-image {
                width: 100%;
                height: 100%;
            }
        }

        .content {
            margin: 0 .3rem;
            margin-top: .6rem;
            background-color: #fff;
            border-radius: 10px;
            padding: .2rem;

            .title {
                font-size: .32rem;
                font-weight: bolder;
                margin-bottom: .2rem;
                padding-left: .2rem;
            }

            .center_box {
                overflow: hidden;
                border: 1px solid #f5f5f5;
                padding: .2rem .3rem;
                border-radius: 10px;
                /*margin-top: -.6rem;*/
                background-color: #fff;

                li {
                    line-height: .5rem;
                    overflow: hidden;

                    .todaySituation {
                        float: left;
                    }

                    .todayTime {
                        float: right;
                        color: #666;
                    }

                    .orderNum,
                    .arriveNum,
                    .waitingNum,
                    .order,
                    .arrive,
                    .waiting {
                        float: left;
                        width: 33%;
                        text-align: center;
                    }

                    .orderNum, .arriveNum, .waitingNum {
                        font-size: .36rem;
                        line-height: .68rem;
                        font-weight: bolder;
                    }

                    .order, .arrive, .waiting {
                        font-size: .24rem;
                    }

                    .orderNum {
                        color: #e00;
                    }

                    .arriveNum {
                        color: #00d;
                    }

                    .waitingNum {
                        color: #0d0;
                    }
                }
            }

            .myCode {
                margin: .1rem 0 .4rem;
                padding: .3rem .3rem;
                display: flex;
                // border: 1px solid #f5f5f5;
                box-shadow: 0 .04rem .1rem #ddd;
                align-items: center;
                background-color: #fff;
                border-radius: 10px;

                .iconBox {
                    width: 20%;
                    height: 1.2rem;
                    margin-right: .2rem;
                    padding-top: .1rem;

                    .icon {
                        display: block;
                        width: 100%;
                    }
                }

                .cont {
                    width: 70%;
                    font-size: .4rem;
                    line-height: .6rem;
                    font-weight: bolder;

                    .explain {
                        font-size: .28rem;
                        line-height: .3rem;
                        font-weight: normal;
                        margin-top: .08rem;
                    }
                }

                .rt {
                    width: 10%;
                    width: .6rem;
                    text-align: center;
                }
            }

            .list {
                font-size: 0;
                margin-top: .5rem;

                &:last-child {
                    margin-bottom: 0;
                }

                .health_code {
                    margin-bottom: .4rem;
                }

                > div {
                    width: 50%;
                    display: inline-block;
                    margin-bottom: .5rem;
                    padding-left: .3rem;

                    .li {
                        display: inline-block;
                        width: 15vw;
                        height: 15vw;
                        font-size: .28rem;
                        text-align: center;
                        color: #fff;
                        cursor: pointer;
                        vertical-align: top;

                        .el-image {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    p {
                        display: inline-block;
                        vertical-align: top;
                        margin-left: .2rem;
                        color: #333;
                        font-size: .28rem;
                        line-height: 15vw;
                    }

                    .el-link {
                        display: block;
                    }
                }
            }
        }

    }

    .choose {
        padding: 0 .3rem;

        .list {
            margin-top: 30vw;

            > div {
                width: 60%;
                height: 1rem;
                border-radius: .5rem;
                font-size: .3rem;
                line-height: 1rem;
                margin: 0 auto .6rem;
                background-color: #6d97ff;
                color: #fff;
                text-align: center;

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
</style>
